<template>
	<view>
		<!--地图容器-->
		  <map id="myMap" :markers="markers" style="width:100%;height:300px;" :longitude="longitude" :latitude="latitude" scale='16'>
		  </map>
			<view>
				<van-search :value="searchVal" placeholder="请输入目的地" 
					@change="satValue"
					@search="searchAddress"
				/>
				<!--关键词输入提示列表渲染-->
				<view>
					<!--绑定回填事件-->
					<view v-for="(item, index) in suggestion" :key="index">
						<!--根据需求渲染相应数据-->
						<!--渲染地址title-->
						<view style="text-align:center;" @click="backfill" :id="index">{{item.title}}</view>
						<!--渲染详细地址-->
						<view style="font-size:12px;color:#666;text-align:center;">{{item.addr}}</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	// 引入腾讯地图SDK
	import QQMapWX from "@/static/libs/qqmap-wx-jssdk.min.js"
	
	export default {
		data() {
			return {
				qqmapsdk: null,
				phone: "",
				location: "",
				latitude: "",
				longitude: "",
				// 图标定位
				markers: [],
				searchVal: "",
				suggestion: [] //搜索备选项
			}
		},
		methods: {
			// 实例化API核心类
			initAPI() {
				this.qqmapsdk = new QQMapWX({
				  key: "UB2BZ-NU6LF-3TQJA-JH24P-YAIA2-PZFTJ"
				});
			},
			//获取当前坐标
			getAddress() {
				let that = this
				uni.getLocation({					type: 'gcj02',					success: function(res) {						console.log(res)						that.latitude = res.latitude						that.longitude = res.longitude
						that.markers.push({
							id: 0,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: "/static/images/map_icon.png",
							width: 30,
							height: 30
						})						//var speed = res.speed						//var accuracy = res.accuracy					}, //定位失败回调      					fail: function() {						wx.hideLoading();						console.log("getLocationFail")					},					complete: function() {						//隐藏定位中信息进度       						wx.hideLoading()					}				});
			},
			//搜索内容改变，触发保存方法
			satValue(e) {
				this.getsuggest(e)
				this.searchVal = e.detail
			},
			//搜索框备选数据回填方法
			backfill(e) {
				let id = e.currentTarget.id, that = this;
				for (var i = 0; i < this.suggestion.length;i++){
					if(i == id){
						that.searchVal = that.suggestion[i].title
						that.suggestion = []
					}  
				}
			},
			//触发关键词输入提示事件
			getsuggest(e) {
				if(!e.detail) {
					this.suggestion = []
					return 
				}
				let that = this
				this.qqmapsdk.getSuggestion({
					//获取输入框值并设置keyword参数
					keyword: e.detail, //用户输入的关键词，可设置固定值,如keyword:'KFC'
					//region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
					success: function(res) {//搜索成功后的回调
						var sug = [];
						for (var i = 0; i < res.data.length; i++) {
							sug.push({ // 获取返回结果，放到sug数组中
								title: res.data[i].title,
								id: res.data[i].id,
								addr: res.data[i].address,
								city: res.data[i].city,
								district: res.data[i].district,
								latitude: res.data[i].location.lat,
								longitude: res.data[i].location.lng
							});
						}
						//设置suggestion属性，将关键词搜索结果以列表形式展示
						that.suggestion = sug
					},
					fail: function(error) {
						console(error);
					},
					complete: function(res) {
						console.log(res);
					}
				});
			},
			//搜索栏改变，触发地区查询
			searchAddress() {
				let that = this
				this.qqmapsdk.search({
						keyword: that.searchVal,  //搜索关键词
						region:'北京',
						success: function (res) { //搜索成功后的回调
							var mks = []
							for (var i = 0; i < res.data.length; i++) {
								mks.push({ // 获取返回结果，放到mks数组中
									title: res.data[i].title,
									id: res.data[i].id,
									latitude: res.data[i].location.lat,
									longitude: res.data[i].location.lng,
									iconPath: "/static/images/map_icon.png", //图标路径
									width: 30,
									height: 30
								})
							}
							that.markers = mks
							console.log(mks)
						},
						fail: function (res) {
							console.log(res);
						},
						complete: function (res){
							console.log(res);
						}
				});
			},
			//使用地图打开当前位置
			handleAddress() {
				let that = this;
				uni.openLocation({
					latitude: that.latitude,
					longitude: that.longitude
				})
			}
		},
		onLoad() {
			this.initAPI()
			this.getAddress()
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
	.view {
		width: 100%;
		height: 100%;
	}
	map {
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
	}
</style>
